<template>
  <div class="select-userful-word"><span @click="showUserFulWord" ref="usefulWord">常用语 <i class="el-icon-arrow-down rorate-time" :class="isShowUsefulWord ? 'rotate':''"></i></span></div>
</template>

<script>
export default {
  name: "editUsefulWord",
  methods:{
    /**
     * 展开常用语
     */
    showUserFulWord(){
      this.$emit("update:isShowUsefulWord",!this.isShowUsefulWord)
    }
  },
  props:{
    isShowUsefulWord:{
      type:Boolean,
      default:false
    }
  }
}
</script>

<style scoped lang="scss">
.select-userful-word {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0084FF;
  text-align: right;
  padding: 12px 0 4px;
  span {
    cursor: pointer;
  }
  .rorate-time {
    transition: .5s;
  }
  .rotate {
    transform: rotate(180deg);
  }
}
</style>
